<template>
  <div id="app">
    <div class="userinfo" v-if="creatStatus">
      <div class="infoBox">
        <div class="titleTop">{{ $t("home.newWork") }}</div>
        <div class="item">
          <div class="labal">
            <div
              v-if="bookInfo.coverUrl"
              @mouseleave="leaveMouse"
              @mouseenter="onmouse"
              @click="modifyImg"
              class="imgDele"
            >
              <div v-if="deleIcon" class="dialogImg">
                <i class="el-icon-delete"></i>
              </div>
              <img :src="bookInfo.coverUrl" alt="" />
            </div>
            <img
              v-else
              style="width: 85px; height: 115px; margin-bottom: 10px"
              src="../../../assets/defaultBookCover.png"
              alt=""
            />
            <!-- 上传图片 -->
            <el-upload
              action="javasprict:;"
              :show-file-list="false"
              :http-request="upLoadImg"
            >
              <!-- :before-upload="beforeAvatarUpload" -->
              <!-- :headers="importHeaders" -->
              <el-button size="small" class="upImg">{{
                $t("home.uploadCover")
              }}</el-button>
            </el-upload>
          </div>
          <div class="content">
            <pre class="tip"
              >{{ $t("home.notice") }}
{{ $t("home.uploadPixelJpg5") }}
{{ $t("home.coverShowWorkPen") }}
{{ $t("home.recommendedUse") }}
{{ $t("home.uploadingPornographic") }}
{{ $t("home.coverReviewed3") }}
{{ $t("home.noCoverResources") }}
</pre
            >
          </div>
        </div>
        <el-form
          ref="setBook"
          :rules="rules"
          :model="bookInfo"
          label-width="120px"
        >
          <el-form-item :label="$t('home.titleWork')" prop="bookTitle">
            <div class="writeName">
              <el-input
                v-model="bookInfo.bookTitle"
                :placeholder="$t('home.pleaseFillIn')"
              ></el-input>
              <p class="bookTitle">{{ bookInfo.bookTitle.length }}/120</p>
            </div>
          </el-form-item>
          <el-form-item :label="$t('home.classificationWorks')">
            <el-input
              :placeholder="$t('home.pleaseSelectCategory')"
              disabled
              v-model="checkboxGroup2[0]"
            >
              <el-button type="primary" slot="append" @click="workClassFn">{{
                $t("home.classificationOfSelectedWorks")
              }}</el-button>
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="作品标签：">
            <el-input
              placeholder="自定义或选择标签"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
              <el-button type="primary" @click="getTagesFn" slot="append"
                >请选择标签</el-button
              >
            </el-input>
            <el-tag
              style="marginright: 10px"
              :key="tag"
              v-for="tag in bookInfo.plotlabel"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
          </el-form-item> -->
          <el-form-item :label="$t('home.bookDescription')" prop="bookIntro">
            <el-input
              type="textarea"
              v-model="bookInfo.bookIntro"
              :placeholder="$t('home.enter20to300')"
              rows="6"
            >
            </el-input>
            <p
              style="
                position: absolute;
                bottom: 10px;
                right: 10px;
                color: #666;
                font-size: 18px;
              "
            >
              {{ bookInfo.bookIntro.length }}/200
            </p>
          </el-form-item>
        </el-form>
      </div>
      <div class="type">
        <button @click="release()">{{ $t("home.immediatelyRelease") }}</button>
      </div>
      <!-- 分类层 -->
      <el-dialog
        :title="$t('home.classificationWorks')"
        :visible.sync="dialogFormVisible"
      >
        <div class="classTag">{{ $t("home.man") }}：</div>
        <el-checkbox-group
          v-model="checkboxGroup2"
          class="checkGroup"
          size="mini"
          :max="1"
        >
          <div class="checkContent">
            <el-checkbox
              v-for="(item, index) in typeListMan"
              :key="index"
              :label="item.name"
              width="120px"
              border
              >{{ item.name }}</el-checkbox
            >
          </div>
        </el-checkbox-group>
        <div class="classTag">{{ $t("home.woman") }}：</div>
        <el-checkbox-group
          v-model="checkboxGroup2"
          class="checkGroup"
          size="mini"
          :max="1"
        >
          <div class="checkContent">
            <el-checkbox
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.name"
              width="120px"
              border
              >{{ item.name }}</el-checkbox
            >
          </div>
        </el-checkbox-group>
        <!-- <span v-for="(item,index) in typeList" :class="[bookInfo.type == item.value?'active':'disActive']">{{item.value}}</span> -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">{{
            $t("home.cancel")
          }}</el-button>
          <el-button type="primary" @click="checkWorkClass">{{
            $t("home.confirm")
          }}</el-button>
        </div>
      </el-dialog>
      <!-- 标签层 -->
      <!-- <el-dialog title="作品标签" :visible.sync="dialogFormVisiblexx">
        <div> -->
      <!-- <label for="">作品标签</label> -->
      <!-- <div></div>
          <div class="selectTag" style="margintop: 20px">
            <el-tag
              style="marginright: 10px"
              :key="tag"
              v-for="tag in tagList"
              @click="addtag(tag)"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisiblexx = false">取 消</el-button>
          <el-button type="primary" @click="tagAddSubmit">确 定</el-button>
        </div>
      </el-dialog> -->
    </div>

    <!-- //创建成功 -->
    <el-row v-else class="successMess">
      <el-col :span="24" class="successContent">
        <div class="successImg"></div>
        <h2>{{ $t("home.creatingSuccessful") }}</h2>
      </el-col>
      <el-col :span="24" text-alin="center">
        <p>
          {{ $t("home.soonCreateChapter") }}
        </p>
        <p>
          {{ $t("home.notice") }}：{{ $t("home.chaptersNoLess5") }}；{{
            $t("home.notContainPornography")
          }}
        </p>
        <p>
          <el-button @click="goWrite" type="primary">{{
            $t("home.writeNewChapter")
          }}</el-button>
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { uploadFile } from "@/api/info";
import {
  createBook,
  workClass,
  getTages,
  selectCategory2,
} from "@/api/authorCenter/createBook";
export default {
  data() {
    return {
      bookId: "",
      deleIcon: false,
      creatStatus: true, //创建成功展示
      importHeaders: {
        authorization: this.$store.state.userInfo.token,
      },
      checkboxGroup2: [],
      bookInfo: {
        coverUrl: "", //图片地址
        bookTitle: "", //数据标题
        categoryId1: "", //
        plotlabel: [], //作品标签
        bookIntro: "", //书籍简介
        // tag: [], //
      },
      typeList: [],
      typeListMan: [],
      dynamicTags: [
        this.$t("home.labelOne"),
        this.$t("home.labelTwo"),
        this.$t("home.labelThree"),
      ],
      inputVisible: false,
      inputValue: "",
      tagList: [], //作品标签
      dialogFormVisible: false,
      dialogFormVisiblexx: false,
      rules: {
        bookTitle: [
          {
            required: true,
            message: this.$t("home.enterTitleWork"),
            trigger: "blur",
          },
          {
            max: 120,
            message: this.$t("home.titleWorkNotExceed120"),
            trigger: "blur",
          },
        ],
        bookIntro: [
          {
            required: true,
            message: this.$t("home.enterBookIntroduction"),
            trigger: "blur",
          },
          {
            min: 20,
            message: this.$t("home.introductionNotLess20"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onmouse() {
      this.deleIcon = true;
    },
    leaveMouse() {
      this.deleIcon = false;
    },
    modifyImg() {
      this.bookInfo.coverUrl = "";
    },
    goWrite() {
      sessionStorage.removeItem("writeArticle");
      let item = {
        bookId: this.bookId,
        bookTitle: this.bookInfo.bookTitle,
        contentId: "",
        content: "",
        contentType: 0,
        wordsCount: "",
      };
      sessionStorage.setItem("writeArticle", JSON.stringify(item));
      this.$router.push({ path: "/writerTool" });
    },

    upLoadImg(res) {
      const isJPG = res.file.type === "image/jpeg";
      const isPng = res.file.type === "image/png";

      const isLt2M = res.file.size / (1024 * 1024) <= 5;

      let isWidth = null;
      let isHeight = null;
      let isWeiHei = null;
      let newImg = new Image();
      let that = this;
      newImg.src = URL.createObjectURL(res.file);

      newImg.onload = function () {
        isWidth = newImg.width;
        isHeight = newImg.height;
        console.log(isWidth, isHeight);
        isWeiHei = isWidth == 600 && isHeight == 800;
        if ((isJPG || isPng) && isLt2M && isWeiHei) {
          that.bookInfo.coverUrl = URL.createObjectURL(res.file);
          let fromData = new FormData();
          fromData.append("file", res.file);
          uploadFile(fromData).then((res) => {
            that.bookInfo.coverUrl = res.source;
          });
        } else {
          that.$message.error(that.$t("home.uploadProfilePictures"));
          return false;
        }
      };
    },
    //新增标签
    addtag(tag) {
      if (this.bookInfo.plotlabel.length === 3) {
        this.$message({
          message: this.$t("home.threeLabels"),
          type: "error",
        });
        return;
      }
      this.bookInfo.plotlabel.push(tag);
    },
    //确认标签添加
    tagAddSubmit() {
      // console.log(this.bookInfo.plotlabel);
      // this.bookInfo.plotlabel = this.bookInfo.tag;
      this.dialogFormVisiblexx = false;
    },
    // 删除选中标签
    handleClose(tag) {
      this.bookInfo.plotlabel.splice(this.bookInfo.plotlabel.indexOf(tag), 1);
    },
    //立即发布
    release() {
      this.$refs["setBook"].validate((valid) => {
        if (valid) {
          let params = {};
          this.typeList.forEach((element) => {
            // let keyName = Object.keys(element);
            if (element.name == this.checkboxGroup2[0]) {
              this.bookInfo.categoryId1 = element.categoryId;
            }
          });
          if (this.bookInfo.categoryId1 == "") {
            this.typeListMan.forEach((element) => {
              // let keyName = Object.keys(element);
              if (element.name == this.checkboxGroup2[0]) {
                this.bookInfo.categoryId1 = element.categoryId;
              }
            });
          }
          // this.bookInfo.plotlabel = this.bookInfo.plotlabel.join(",");
          params = this.bookInfo;
          createBook(params).then((res) => {
            if (res.code == 1) {
              this.creatStatus = false;
              this.bookId = res.source;
            }
          });
        }
      });
    },
    //作品分类
    workClassFn() {
      this.dialogFormVisible = true;
      let params = {
        site: 1,
      };
      selectCategory2(params).then((res) => {
        this.typeListMan = res.source;
      });
      let paramsWoman = {
        site: 2,
      };
      selectCategory2(paramsWoman).then((res) => {
        this.typeList = res.source;
      });
      // workClass().then((res) => {
      //   this.typeList = res.source;
      // });
    },
    checkWorkClass() {
      this.dialogFormVisible = false;
    },
    //获取标签
    getTagesFn() {
      getTages().then((res) => {
        this.tagList = res.source;
      });
      this.dialogFormVisiblexx = true;
    },
    showInput() {
      if (this.bookInfo.plotlabel.length === 3) {
        this.$message({
          message: this.$t("home.threeLabels"),
          type: "error",
        });
        return;
      }
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      if (this.inputValue.length > 5 || this.inputValue.length == "") {
        this.$message({
          type: "error",
          message: this.$t("home.maximumFiveCharacters"),
        });
      } else {
        if (this.bookInfo.plotlabel.length === 3) {
          this.$message({
            message: this.$t("home.threeLabels"),
            type: "error",
          });
          return;
        } else {
          this.bookInfo.plotlabel.push(this.inputValue);
          this.inputVisible = false;
          this.inputValue = "";
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
::v-deep .el-form-item {
  margin-bottom: 45px;
}
::v-deep .el-form-item__label {
  font-size: 18px;
  color: #000;
}
::v-deep .el-input__inner {
  height: 48px;
  border-radius: 8px;
}
.titleTop {
  border-bottom: 1px solid #eee;
  font-size: 24px;
  color: #000;
  margin: 15px 0;
  padding-bottom: 10px;
}
.classTag {
  margin-bottom: 15px;
}
.checkContent {
  margin-bottom: 20px;
  position: relative;
}
.checkGroup {
  position: relative;
}
.upImg {
  // width: 86px;
  height: 28px;
  margin: 10px 0 20px 5px;
  border: 1px solid #000;
  color: #000;
  line-height: 10px;
  border-radius: 5px;
}
.imgDele {
  position: relative;
  width: 85px;
  height: 115px;
  img {
    width: 85px;
    height: 115px;
    margin-bottom: 10px;
  }
  .dialogImg {
    i {
      color: #fff;
    }
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    width: 85px;
    height: 115px;
    position: absolute;
    z-index: 10;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.successContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.successImg {
  width: 156px;
  height: 156px;
  background: url("../../../assets/spring.png") no-repeat -40px -110px;
}
.writeName {
  position: relative;
  .bookTitle {
    position: absolute;
    right: 10px;
    top: 3px;
    font-size: 18px;
    color: #666;
  }
}
.successMess {
  padding-top: 30px;
  p,
  h2 {
    text-align: center;
  }
  h2 {
    margin: 20px 0;
  }
  button {
    margin-top: 20px;
  }
}
.input-new-tag {
  margin-top: 10px;
}
.selectTag {
  .el-tag {
    color: #ccc;
    background-color: rgb(239, 240, 241);
    border-color: #ccc;
    cursor: pointer;
  }
}
.checkGroup {
  label {
    width: 120px;
    margin-bottom: 10px;
  }
  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0;
  }
}
.active {
  background: #21d4cf;
}
.tip {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #cccccc;
  line-height: 16px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.avatar {
  width: 60px;
  height: 60px;
  display: block;
  background: #a9a9a9;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.userinfo {
  .infoBox {
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    .item {
      display: flex;
      flex-direction: row;
      margin: 10px 0;
      margin-bottom: 20px;
      .labal {
        display: flex;
        width: 100px;
        box-sizing: border-box;
        flex-direction: column;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .content {
        flex: 1;
        margin-left: 10px;

        p {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .type {
    // background: yellow;
    margin-top: 20px;
    text-align: center;

    button {
      width: 398px;
      height: 48px;
      background: #3385fd;
      border-radius: 8px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      border: none;
      border: 0;
      outline: none;
      margin-bottom: 30px;
    }
  }
}

#improve {
  width: 600px;
  margin: 0 auto;

  .title {
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 40px;
    text-align: center;
  }

  .text {
    text-align: center;
    font-size: 9px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #cccccc;
    line-height: 12px;
  }
}
</style>
